HC: implement overlay scrollbar theming

while the behavior was in place, the specific theming for
overlay scrollbars was missing, and content was hidden.

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 81eddf76e7de76f5d96bab341565fb5051a0484c..5cd70bdf335458e29bfaf33b5fca5040ff69a220 100644 (file)
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -1374,6 +1374,9 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
 
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1;
+  $_slider_margin: 3px;
+  $_slider_fine_tune_margin: 4px;
+  
   .button {
     border: none;
   }
@@ -1398,6 +1401,40 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
       }
     }
   }
+  &.overlay-indicator {
+    &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
+      opacity: 0.4;
+
+      -GtkRange-slider-width: 5px;
+
+      .slider {
+        margin: 0;
+        background-color: $fg_color;
+        border: 1px solid white;
+        background-clip: padding-box;
+      }
+
+      .trough {
+        border-style: none;
+        background-color: transparent;
+      }
+
+      // w/o the following margin tweaks the slider shrinks when hovering/dragging
+      &.vertical .slider {
+        margin-top: $_slider_margin - 1px;
+        margin-bottom: $_slider_margin - 1px;
+      }
+
+      &.horizontal .slider {
+        margin-left: $_slider_margin - 1px;
+        margin-right: $_slider_margin - 1px;
+      }
+
+    }
+
+    &.dragging,
+    &.hovering { opacity: 0.7; }
+  }
 }
 
 .scrollbars-junction { // the small square between two scrollbars

diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index c2444252514166ce5aa25e18e3185bf83db79074..b54a7113ea7be93cc46130329c6a1203dd8265cd 100644 (file)
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -1606,6 +1606,25 @@ GtkTreeView.view.progressbar {
       border-width: 8px; }
       .scrollbar.slider.fine-tune:prelight:active {
         background-color: #000; }
+  .scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    opacity: 0.4;
+    -GtkRange-slider-width: 5px; }
+    .scrollbar.overlay-indicator:not(.dragging):not(.hovering) .slider {
+      margin: 0;
+      background-color: #000;
+      border: 1px solid white;
+      background-clip: padding-box; }
+    .scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough {
+      border-style: none;
+      background-color: transparent; }
+    .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical .slider {
+      margin-top: 2px;
+      margin-bottom: 2px; }
+    .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal .slider {
+      margin-left: 2px;
+      margin-right: 2px; }
+  .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering {
+    opacity: 0.7; }
 
 .scrollbars-junction, .scrollbar.trough {
   border-color: transparent;